﻿<DemoPageSectionComponent Id="DataGrid-PagingAndScrolling-HorizontalScrolling">
    @inject NwindDataService NwindDataService

    @if(DataSource == null) {
        <p><em>Loading...</em></p>
    } else {
        <DxDataGrid Data="@DataSource"
                    HorizontalScrollBarMode="ScrollBarMode.Visible"
                    PagerNavigationMode="PagerNavigationMode.NumericButtons">
            <DxDataGridColumn Field="@nameof(Order.ShipName)" Width="250px" />
            <DxDataGridColumn Field="@nameof(Order.ShipAddress)" Width="350px" />
            <DxDataGridColumn Field="@nameof(Order.ShipCity)" Width="200px" />
            <DxDataGridColumn Field="@nameof(Order.ShipPostalCode)" Width="150px" />
            <DxDataGridColumn Field="@nameof(Order.ShipCountry)" Width="200px" />
            <DxDataGridColumn Field="@nameof(Order.Freight)" Width="100px" />
            <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)" DisplayFormat="d" Width="120px" />
            <DxDataGridDateEditColumn Field="@nameof(Order.ShippedDate)" DisplayFormat="d" Width="120px" />
        </DxDataGrid>
    }

    @code {
        IEnumerable<Order> DataSource { get; set; }

        protected override async Task OnInitializedAsync() {
            DataSource = await NwindDataService.GetOrdersAsync();
        }
    }
</DemoPageSectionComponent>
